<template>
  <a-col :span="workSpaceItem.width || 24">
    <div class="notice-compt-wrapper protal-compt-wrapper" ref="noticeArea">
      <a-card :bordered="false">
        <div slot="title" class="title">
          <span>{{$t('portal.notice')}}</span><a-icon type="form" class="edit-btn" @click="openConfig" />
        </div>
        <div class="card-content-area">
          <a-list class="notice-list" :data-source="noticeData">
            <a-list-item slot="renderItem" slot-scope="item, index">
              <div class="item-txt" @click="openDetail(item)">
                {{index+1}}. {{ item.title }}
              </div>
            </a-list-item>
          </a-list>
        </div>
      </a-card>
      <notice-config-modal
        :visible="cfgModalStatus"
        :workSpaceItem="workSpaceItem"
        @ok="submitOK" 
        @cancel="cancelModal" 
        :getContainer="getContainer">
      </notice-config-modal>
      <notice-detail
       :visible="detailStatus"
       :detailData="detailData"
       @cancel="cancelDetail">
      </notice-detail>
    </div>
  </a-col>
</template>
<script>
import { getComponentDataList } from '@/api/devportalApi.js'
import NoticeConfigModal from "./NoticeConfigModal"
import NoticeDetail from './NoticeDetail' 
export default {
  name: 'Notice',
  props: {
    dataUrl: {
      type: String,
      defualt: ''
    },
    workSpaceItem: {
      type: Object,
      defualt: () => ({})
    }
  },
  data () {
    return {
      noticeData: [],
      cfgModalStatus: false,
      detailStatus: false,
      detailData: {}
    }
  },
  components: {
    NoticeConfigModal,
    NoticeDetail
  },
  methods: {
    openConfig () {
      this.cfgModalStatus = true
    },
    cancelModal () {
      this.cfgModalStatus = false
    },
    submitOK () {
      this.$emit('refreshPersonalConfig')
      this.cfgModalStatus = false
    },
    getContainer () {
      return this.$refs.noticeArea
    },
    openDetail (item) {
      this.detailData = item
      this.detailStatus = true
    },
    cancelDetail () {
      this.detailStatus = false
    },
    getData () {
      getComponentDataList(this.dataUrl).then(res => {
        if (res.status === 200) {
          let content = res.data ? res.data.content : []
          content.sort((a,b) => a.rank - b.rank)
          if (this.workSpaceItem.personalConfig) {
            let maxLength = this.workSpaceItem.personalConfig.num
            if (maxLength !== undefined) {
              this.noticeData = content.slice(0, maxLength)
            } else {
              this.noticeData = content
            }
          } else {
            this.noticeData = content
          }
          
        }
      })
    }
  },
  mounted () {
    if (this.dataUrl) {
      this.getData()
    }
  },
  watch: {
    workSpaceItem: {
      handler: function () {
        this.getData()
      },
      deep: true
    }
  }
}
</script>
<style lang="less" scoped>
@import '~@/pages/devportal/modules/index.less';
.notice-list.ant-list {
  .ant-list-item {
    .item-txt {
      cursor: pointer;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      &:hover {
        color: #274fde;
      }
    }
  }
}
.notice-compt-wrapper {
  margin-bottom: 0px;
  .card-content-area {
    // height: 138px !important;
    height: calc(100vh - 798px) !important;
  }
}
</style>